import { ApiHttp } from "@/network/ApiHttp";
import { GlobalStore } from "@/store/GlobalStore";
import dayjs from "dayjs";
import { useEffect } from "react";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { Paths } from './Paths';
import { Toast } from "./component/Toast";
import './init';
import { KnownError } from "./network/Http";
import { log_error } from "./pages/Main/log_error";
import styles from './style.module.less';
import { StoreStatus } from "./utils/makeStore";
const router = createBrowserRouter(Paths.Routes)

function App() {
  const [{ session_id }, dispatch, status] = GlobalStore.useStore()
  useEffect(() => {
    if (status !== StoreStatus.Initialized) return;
    if (!session_id) return
    const c = new AbortController()
    ApiHttp.post<any, any>(`user/info`, void 0, void 0, { signal: c.signal })
      .then(r => dispatch({
        type: 'user_info', payload: {
          admin: r.data.admin,
          user_id: r.data.id,
          username: r.data.username
        }
      }))
      .catch(ApiHttp.ignoreAbort)
      .catch(e => {
        KnownError.is(e)
      })
      .catch(log_error)
    return () => c.abort()
  }, [dispatch, session_id, status])

  useEasterEgg();
  return (
    <Toast.Provider>
      <div className={styles.App}>
        <RouterProvider router={router} future={{ v7_startTransition: true }} />
      </div>
    </Toast.Provider>
  );
}

function useEasterEgg() {
  useEffect(() => {
    interface DayInfo {
      m: number, d: number, t: string, c: string
    }
    let prev_day_info: DayInfo | undefined = void 0;
    function gen_day_info(info: Partial<DayInfo>) {
      const ret: DayInfo = prev_day_info = {
        m: 0, d: 1, t: '', c: '',
        ...prev_day_info,
        ...info,
      }
      return [ret];
    }
    const days: DayInfo[] = [
      ...gen_day_info({ m: 9, d: 18, t: '勿忘国耻', c: 'sad' }),
      ...gen_day_info({ m: 12, d: 13 }),
      // ...gen_day_info({ m: 10, d: 30 }),
      ...gen_day_info({ m: 10, d: 1, t: '自强不息', c: 'red' }),
      ...gen_day_info({ d: 2 }),
      ...gen_day_info({ d: 3 }),
      ...gen_day_info({ d: 4 }),
      ...gen_day_info({ d: 5 }),
      ...gen_day_info({ d: 6 }),
      ...gen_day_info({ d: 7 }),
      ...gen_day_info({ m: 5, d: 1, t: '致敬劳动者', c: 'red' }),
      ...gen_day_info({ d: 2 }),
      ...gen_day_info({ d: 3 }),
      ...gen_day_info({ d: 4 }),
      ...gen_day_info({ d: 5 })
    ]
    function check_today() {
      const today = dayjs()
      const html = document.querySelector('html');
      if (!html) return;

      days.map(v => html.classList.remove(v.c))
      html.setAttribute('bg-text', '')

      const day = days.find(({ m, d }) => today.month() === (m - 1) && today.date() === d);
      if (!day) return;
      html.classList.add(day.c)
      html.setAttribute('bg-text', day.t)
      window.is_sad_day = day.c === 'sad';
      window.is_red_day = day.c === 'red';
    }
    check_today();
  }, [])
}

export default App;
